<template>
  <!-- 这里是咨询开单 -->
  <div class="box">
    <el-form label-width="auto" class="top">
      <el-row class="moutend">
        <el-col :span="7">
          <el-input v-model="input3" style="width:50%" placeholder=" 姓名.手机号.会员号" class="input-with-select" @input="clearNoNum" />
          <el-button>搜索顾客</el-button>
          <!-- <el-button type="text">清除</el-button> -->
        </el-col>
        <el-col :span="2" :offset="15">
          <el-button type="primary" @click="addCustomer">增加顾客</el-button>
          <!-- <el-form-item label="增加顾客:">
            <member-selector multiple :visible="visibleS" :value="memberList.map(item => item.id)" @cancel="handleCancel(memberList)" @confirm="handleConfirm(memberList)" />
          </el-form-item> -->
        </el-col>
      </el-row>
      <el-row type="flex">
        <el-col>
          <Search :data="selections" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
        </el-col>
        <el-col :span="4">
          <el-form-item>
            <dictionary-selector :code="values==3?'swan_financial_sklx':'swan_financial_sklx'" :value.sync="searchForm.value3" @change="handle" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="mounteds">
        <Search :data="tabsName" :attribute="'createdTime'" @change="handleTypeChange" @dateChange="handleDateChange" />
        <!-- <Tabs v-model="values" :data="tabsName" class="tabcss" @change="searchChange" /> -->
      </el-row>
    </el-form>
    <!-- <div v-show="values==3||values==4" class="numberOrder">
      有效订单数量<span>6</span> 有效订单总额：<span>￥8,8000</span>
    </div> -->
    <!-- //待咨询 -->
    <!-- <Table v-show="values==1" ref="table" api="/api/v1/swan/operation/accept/find/page">
      <template v-slot:default="callbackList"> -->
    <el-table :data="list1" style="width: 100%">
      <el-table-column prop="no" label="顾客" align="center" />
      <el-table-column prop="address" label="性别" align="center" />
      <el-table-column prop="advisoryType" label="分诊类型" align="center">
        <template slot-scope="scope">
          <span>{{ dictFormatter('swan_front_jzlx', scope.row.treatType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="accepterName" label="项目分类/项目" align="center" />
      <el-table-column prop="arrangeType" label="排台方式" align="center">
        <template slot-scope="scope">
          <span>{{ dictFormatter('swan_front_ptlx', scope.row.arrangeType) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="intentCaseName" label="咨询师" align="center" />
      <el-table-column prop="adviserName" label="主治医生" align="center" />
      <el-table-column prop="date" label="分诊时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ parseTime(row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="faceDoctorName" label="分诊人" align="center" />
      <el-table-column prop="faceDoctorName" label="状态" align="center" />
      <el-table-column prop="faceDoctorName" label="咨询结果" align="center" />
      <el-table-column prop="date" label="接待时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ parseTime(row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="small" plain @click="handleNewAdd(row, row.id)">开始咨询</el-button>
          <el-button size="small" plain>改派</el-button>
          <el-button size="small" plain @click="Billing(row)">开单</el-button>
          <el-button size="small" plain>结束</el-button>
          <el-button size="small" plain>继续咨询</el-button>
          <el-button size="small" plain>咨询记录</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- </template>
    </Table> -->

    <!-- //已咨询 -->
    <!-- <Table v-show="values==2" ref="table" api="/api/v1/swan/operation/talk/find/page">
      <template v-slot:default="callbackList"> -->

    <!-- <el-table v-show="values==2" :data="list2" style="width: 100%">
      <el-table-column prop="customerName" label="顾客" align="center" />
      <el-table-column prop="oneDemand" label="主要需求" align="center" />
      <el-table-column prop="towDemand" label="次需求1" align="center" />
      <el-table-column prop="threeDemand" label="次需求2" align="center" />
      <el-table-column prop="createdTime" label="咨询时间" align="center" />
      <el-table-column prop="result" label="咨询结果" align="center">
        <template slot-scope="scoped">
          <span>{{ scoped.row.result==='1'?'未成交':'成交' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="接待详情" align="center">
        <template slot-scope="scoped">
          <el-button size="small" plain @click="seeDetails(1, scoped.row.triageId, 'doctor/consulting/triageList')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column label="咨询详情" align="center">
        <template slot-scope="scoped">
          <el-button size="small" plain @click="seeDetails(2, scoped.row.id, 'doctor/consulting/advisoryList')">查看</el-button>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="100">
        <template slot-scope="scoped">
          <el-button v-if="scoped.row.result!=='1'" size="small" plain @click="Billing(scoped.row)">开单</el-button>
          <el-button v-else size="small" plain @click="handleReConsult">重咨</el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <!-- </template>
    </Table> -->
    <!-- 已开单 -->
    <!-- <Table v-show="values==3" ref="table" api="/api/v1/swan/order/order/find/page">
      <template v-slot:default="callbackList"> -->

    <!-- <el-table v-show="values==3" :data="list3" style="width: 100%">
      <el-table-column prop="dataCode" label="订单号" align="center" />
      <el-table-column prop="customerName" label="顾客" align="center" />
      <el-table-column prop="createdTime" label="开单时间" align="center">
        <template slot-scope="{ row }">
          <span>{{ parseTime(row.createdTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="amount" label="金额" align="center" />
      <el-table-column prop="createdBy" label="开单人" align="center" />
      <el-table-column prop="payMode" label="收款类型" align="center">
        <template slot-scope="scope">
          <span>{{ dictFormatter('swan_financial_sklx', scope.row.payMode) }}</span>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button size="small" plain @click="handleOrderDetails(row.id,row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table> -->

    <pagination :page-num="queryParams.page" :page-size="queryParams.pageSize" :on-change="handlePaginationChange" :total="total" />

    <!-- </template>
    </Table> -->

    <!-- 已退单 -->
    <!-- <Table v-show="values==4" ref="table" api="/api/v1/swan/order/cancel/find/page">
      <template v-slot:default="callbackList">
        <el-table v-loading="callbackList.loading" :data="callbackList.list" style="width: 100%">
          <el-table-column prop="no" label="退单号" align="center" />
          <el-table-column prop="orderName" label="订单号" align="center" />
          <el-table-column prop="customerName" label="顾客" align="center" />
          <el-table-column prop="createTime" label="开单时间" align="center" />
          <el-table-column prop="updateTime" label="更新时间" align="center" />
          <el-table-column prop="money" label="金额" align="center" />
          <el-table-column prop="people" label="退单人" align="center" />
          <el-table-column prop="moneyType" label="退单类型" align="center" />
          <el-table-column prop="checkStatus" label="审批状态" align="center">
            <template slot-scope="scope">
              <span>{{ dictFormatter('swan_front_spzt', scope.row.checkStatus) }}</span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" align="center">
            <template>
              <el-button size="small" plain @click="handleChargDetails">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </Table> -->
    <!-- @success="fetchList2('doctor/consulting/listed')" -->
    <NewAdd v-if="modalVisible" ref="newAdd" :modal-visible-data="modalVisibleData" @success="getList()" />
    <SeeDetails v-if="modalVisibles" ref="seeDetails" :ids="id" :modal-number="modalNumber" :url="url" />
    <Billing v-if="billing" ref="billing" :billing-data="billingData" @success="getList()" />
    <OrderDetails v-if="orderDetails" :id="ids" ref="orderDetails" />
    <ChargDetails v-if="chargDetails" ref="chargDetails" />
  </div>
</template>
<script>
import NewAdd from './newAdd';// 新增咨询
import SeeDetails from './seeDetails';// 查看详情
import Billing from './billing';// 开单
import OrderDetails from './orderDetails';// 已开单的查看详情
import ChargDetails from './chargDetails';// 已退单的查看详情
import { DictionarySelector } from '@rabbit.do/rabbit';
import Search from '@/components/Search';
// import Tabs from '@/components/SearchSelection';
import { selections } from "@/config";
export default {
  components: {
    NewAdd,
    SeeDetails,
    Billing,
    OrderDetails,
    ChargDetails,
    // Tabs,
    Search,
    DictionarySelector,
  },
  data() {
    return {
      url: '',
      selections,
      visibleS: false,
      flag: true,
      id: "",
      ids: "",
      queryParams: {
        page: 1,
        pageSize: this.$store.state.commonsettings.maxPageSize,
      },
      total: 0,
      searchForm: {
        value3: '',
      },
      list1: [{
        no: '张女士',
      }],
      // list2: [],
      // list3: [{
      //   no: '1111',
      // }],
      input3: '',
      tabsName: [
        { id: 1, name: "全部" },
        { id: 2, name: "未接待" },
        { id: 3, name: "已接待" },
        { id: 4, name: "已取消" },
      ],
      currentPage1: 5,
      currentPage2: 5,
      currentPage3: 5,
      search: {},
      currentPage4: 4,
      values: 1, // 控制表格是待咨询还是已咨询的
      value: '', // 选择顾客
      money: '', // 收款类型
      order: '', // 订单状态
      modalVisible: false,
      modalVisibleData: {},
      modalVisibles: false,
      modalNumber: 1,
      billing: false,
      orderDetails: false,
      chargDetails: false,
      billingData: {},
    };
  },
  // watch: {
  //   defaultValue: {
  //     handler: function(value = []) {
  //       this.memberList = value;
  //     },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  created() {
    if (this.$route.query.isPopup) {
      this.$router.push({
        query: {},
      });
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    clearNoNum(obj) {
      console.log(obj, "ifhdiuf");
      this.input3 = this.input3.replace(/[^\d.]/g, ""); // 清除“数字”和“.”以外的字符
      this.input3 = this.input3.replace(/^\./g, ""); // 验证第一个字符是数字而不是.
      this.input3 = this.input3.replace(/\.{2,}/g, "."); // 只保留第一个. 清除多余的
      this.input3 = this.input3.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
      this.input3 = this.input3.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');// 只能输入两个小数
    },
    addCustomer() {
      this.$router.push({
        path: '/swan/customer/customers',
        query: {
          isPopup: true,
        },
      });
    },
    handleDateChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    getList() {
      this.fetchList1('doctor/consulting/listing');
      // this.fetchList2('doctor/consulting/listed');
      // this.fetchList3('doctor/consulting/list');
    },
    handleTypeChange(val) {
      Object.assign(this.search, val);
      this.getList();
    },
    fetchList1(url) { // 请求列表的数据
      this.$api[url]({ ...this.queryParams, query: this.search }).then(res => {
        if (res.code !== 200) return;
        this.list1 = res.data.result;
        this.total = this.list1.length;
        this.modalVisible = false;
      });
    },
    // fetchList2(url) { // 请求列表的数据
    //   this.$api[url]({ ...this.queryParams, query: this.search }).then(res => {
    //     if (res.code !== 200) return;
    //     // this.list2 = res.data.result;
    //     this.billing = false;
    //   });
    // },
    // fetchList3(url) { // 请求列表的数据
    //   this.$api[url]({ ...this.queryParams, query: this.search }).then(res => {
    //     if (res.code !== 200) return;
    //     this.list3 = res.data.result;
    //   });
    // },
    handle() {
      console.log(0);
    },
    searchChange(e) { // Tabs切换的方法函数
      this.values = e;
      // if (e === 1) {
      // this.total = this.list1.length;
      // }
      // else if (e === 2) {
      //   this.total = this.list2.length;
      // } else {
      //   this.total = this.list3.length;
      // }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleNewAdd(val, id) { // 新增咨询
      this.modalVisible = true;
      this.$set(this.modalVisibleData, 'triageId', id);
      this.modalVisibleData = Object.assign(this.modalVisibleData, val);
      console.log(this.modalVisibleData);
      this.$nextTick(() => {
        this.$refs.newAdd.init();
      });
    },
    handleOrderDetails(id, row) { // 已开单的查看详情
      this.orderDetails = true;
      this.ids = id;
      this.$nextTick(() => {
        this.$refs.orderDetails.init();
      });
    },
    handleChargDetails() { // 已退单的查看详情
      this.chargDetails = true;
      this.$nextTick(() => {
        this.$refs.chargDetails.init();
      });
    },
    seeDetails(number, ids, url) { // 查看详情
      this.modalVisibles = true;
      this.modalNumber = number;
      this.url = url;
      console.log(ids, "idssssss");
      this.id = ids;
      this.$nextTick(() => {
        this.$refs.seeDetails.init();
      });
    },
    Billing(val) { // 点击开单
      console.log(8989, val);
      // this.billingData = val;
      this.billing = true;
      this.$nextTick(() => {
        this.$refs.billing.init();
      });
    },
    // closeBilling() {
    //   // this.billing = false;
    //   console.log('fhjshff')
    // },
    // closeNewAdd() {
    //   this.modalVisible = false;
    // },
    handleReConsult() {
      this.values = 1;
      this.modalVisible = true;
      this.$nextTick(() => {
        this.$refs.newAdd.modalShow = true;
      });
    },
    handlePaginationChange(pagination) { // 分页
      this.queryParams = { page: pagination.pageNum, pageSize: pagination.pageSize };
      // this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  color: #707070;
}
.el-table {
  margin: 0 0 60px;
}
.el-button {
  color: rgb(114, 222, 236);
}
.numberOrder {
  color: #a7a7a7;
  margin-top: 20px;
  font-size: 14px;
  span {
    color: #51abab;
  }
}
.top {
  > div {
    margin-right: 10px;
  }
  .moutend{
    margin-bottom: 20px;
  }
  .mounteds{
    margin: 20px 0;
  }
}
.spn {
  float: right;
  .inputCss {
    width: 248px;
  }
}
</style>
